<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('drawMoney.提现管理')" />
    <div class="flex_aic_jcsb">
      <div class="flex_aic">
        <el-input
          v-model="filters.supplierName"
          :placeholder="$t('drawMoney.请输入供应商名称')"
          style="width: 256px"
          class="mr12"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('drawMoney.供应商名称') }}</span>
          </template>
        </el-input>
        <el-input
          v-model="filters.userId"
          :placeholder="$t('drawMoney.请输入用户ID名称')"
          style="width: 256px"
          class="mr12"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('drawMoney.用户ID名称') }}</span>
          </template>
        </el-input>
        <el-input
          v-model="filters.phone"
          :placeholder="$t('drawMoney.请输入手机号码')"
          style="width: 256px"
          class="mr12"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('drawMoney.手机号码') }}</span>
          </template>
        </el-input>
        <el-date-picker
          v-model="filters.date"
          :placeholder="$t('drawMoney.请选择提现日期')"
          style="width: 256px"
          class="mr12"
        />
        <el-select
          v-model="filters.status"
          :placeholder="$t('drawMoney.请选择提现状态')"
          style="width: 256px"
          class="mr12"
        >
          <el-option :label="$t('drawMoney.成功')" value="1" />
          <el-option :label="$t('drawMoney.驳回')" value="2" />
        </el-select>
      </div>
      <div class="flex_aic">
        <el-button>{{ $t('drawMoney.重置') }}</el-button>
        <el-button type="primary">{{ $t('drawMoney.查询') }}</el-button>
      </div>
    </div>
    <el-radio-group v-model="type" class="mt12">
      <el-radio-button :label="$t('drawMoney.新增提现列表')" value="1" />
      <el-radio-button :label="$t('drawMoney.已提现列表')" value="2" />
    </el-radio-group>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      border
    >
      <el-table-column prop="applyTime" :label="$t('drawMoney.申请时间')" />
      <el-table-column prop="withdrawName" :label="$t('drawMoney.提现名称')" />
      <el-table-column prop="contactName" :label="$t('drawMoney.联系人姓名')" />
      <el-table-column prop="phone" :label="$t('drawMoney.手机号码')" />
      <el-table-column prop="bank" :label="$t('drawMoney.所属银行')" />
      <el-table-column prop="bankCard" :label="$t('drawMoney.银行卡号')" />
      <el-table-column prop="idCard" :label="$t('drawMoney.身份证号码')" />
      <el-table-column prop="amount" :label="$t('drawMoney.提现金额')" />
      <el-table-column prop="balance" :label="$t('drawMoney.账户余额')" />
      <el-table-column prop="reason" :label="$t('drawMoney.提现原因')" />
      <el-table-column :label="$t('drawMoney.操作')" fixed="right">
        <template #default="scope">
          <div class="flex_aic_jcc gap-10">
            <el-popconfirm
              :title="$t('drawMoney.确定驳回吗')"
              @confirm="handleDelete(scope.row)"
              :confirm-button-text="$t('drawMoney.确定')"
              :cancel-button-text="$t('drawMoney.取消')"
              width="260px"
            >
              <template #reference>
                <el-button size="small">{{ $t('drawMoney.驳回') }}</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              :title="$t('drawMoney.确定通过吗')"
              @confirm="handleDelete(scope.row)"
              :confirm-button-text="$t('drawMoney.确定')"
              :cancel-button-text="$t('drawMoney.取消')"
              width="260px"
            >
              <template #reference>
                <el-button class="ml0" size="small">{{ $t('drawMoney.通过') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model="editDiaVisible" :data="editDiaData"></EditDia>
  </div>
</template>

<script setup>
import { ref } from "vue";
import EditDia from "./editDia.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const filters = ref({
  supplierName: "",
  userId: "",
  phone: "",
  date: "",
  status: "",
});
const type = ref("1");
const editDiaVisible = ref(false);
const editDiaData = ref({});
const currentPage = ref(1);
const pageSize = ref(10);
const tableData = ref(
  Array(10).fill({
    applyTime: "2024-01-01 12:00:00",
    withdrawName: "张三",
    contactName: "李四",
    phone: "12345678901",
    bank: "中国银行",
    bankCard: "123456789012345678",
    idCard: "123456789012345678",
    amount: 1000,
    balance: 1000,
    reason: "提现原因",
  })
);
const handleDelete = (row) => {
  console.log(row);
};
const handleEdit = (row) => {
  editDiaVisible.value = true;
  editDiaData.value = row;
};
const handleSizeChange = (size) => {
  pageSize.value = size;
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
};
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
</style>
